<template>
  <div class="cart">
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <van-card
        :num="prod.amount"
        :price="prod.price"
        :desc="prod.title"
        :title="prod.title"
        class="goods-card"
        :thumb="prod.img"
      >
        <template #thumb>
          <!-- <van-checkbox :value="prod.checked" @click="toggleCartItemHandler(prod.id)"></van-checkbox> -->
          <van-checkbox :value="prod.checked" @click="toggleCartItem(prod.id)"></van-checkbox>
          <div data-v-7698a586="" class="van-image" style="width: 88px; height: 88px;">
            <img :src="prod.img" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
        <template #num>
          <van-stepper :value="prod.amount" theme="round" button-size="22" disable-input @change="(value) => {changeAmountHandler(prod.id, value)}"/>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="RemoveCartItem(prod.id)"/>
      </template>
    </van-swipe-cell>
    <van-submit-bar :price="totalMoney" button-text="提交订单" >
      <van-checkbox :value="checkedAll" @click="toggleAllHandler">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['checkedAll', 'totalMoney']),
    ...mapState({
      cart: state => state.cart.cart
    })
    // cart () {
    //   return this.$store.state.cart.cart
    // }
    // checkedAll () {
    //   return this.$store.getters.checkedAll
    // }
  },
  methods: {
    ...mapMutations(['RemoveCartItem', 'changeCartItemAmount', 'toggleCartItem', 'checkAllCartItem']),
    // deleteItemHandler (payload) {
    //   this.$store.commit('RemoveCartItem', payload)
    // },
    changeAmountHandler (id, value) {
      // console.log(value, id)
      this.changeCartItemAmount({
        id,
        amount: value
      })
      // this.$store.commit('changeCartItemAmount', {
      //   id,
      //   amount: value
      // })
    },
    // toggleCartItemHandler (id) {
    //   this.$store.commit('toggleCartItem', id)
    // }
    toggleAllHandler () {
      this.checkAllCartItem(!this.checkedAll)
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .van-card__thumb {
    width: 110px;
    height: 88px;
    display: flex;
  }
</style>
